<template>
  <div class="groupMealDetail">
    <div class="title">
      <van-image v-if="order.state!=4" class="icon" :src="require('../../assets/img/my/orderClock.png')" fit="cover" />
      <van-image v-if="order.state==4" class="icon" :src="require('../../assets/img/my/grayClock.png')" fit="cover" />

      <!-- <div v-if="order.state==1||order.state==2">已预约</div>
      <div v-if="order.state==10" style="color:#202327">取消预约</div> -->
      <div :class="order.state==4?'failStatus':'status'">{{ status[order.state] }}</div>

    </div>
    <div class="Box">
      <!-- @click="jump(item)" -->
      <div class="Box_top">
        <div class="image">
          <van-image :src="`${resourceURL}${order.top_pic}`" />
        </div>
        <div class="right">
          <div class="top">
            <div class="name">{{order.service_name}}</div>
            <div :class="order.state==4?'failStatus':'status'">{{ status[order.state] }}</div>
          </div>
          <div class="centerBox">

            <div class="center">{{formatCreateTime(order.make_time)}}</div>
            <div class="center">
              x{{ order.quantity }}
            </div>
          </div>

        </div>
      </div>
      <div class="Box_bottom" v-if="order.state!=3">
        本单已付￥{{order.pay_amount}}订金（提前2小时取消可退）
      </div>
    </div>
    <div class="orderBox">
      <h3>服务信息</h3>
      <div>
        <span>姓名</span>
        <span>{{order.receive_name}}</span>
      </div>

      <div>
        <span>电话</span>
        <span>{{order.r_phone}}</span>
      </div>

    </div>

    <div class="orderBox">
      <h3>订单信息</h3>
      <div>
        <span>订单编号</span>
        <span>{{order.orderno}}</span>
      </div>
      <div>
        <span>下单时间</span>
        <span>{{gettimeDetail(order.pay_time*1000)}}</span>
      </div>
      <div>
        <span>实付定金</span>
        <span>{{order.pay_amount}}</span>
      </div>

    </div>

    <div class='bubox' v-if="order.state==1">
      <van-button round @click.stop="cancal" v-if="order.state==1">取消预订</van-button>
      <van-button round @click.stop="complete" v-if="order.state==2">确认完成</van-button>

    </div>

  </div>
</template>
<script>
import { Toast, Dialog } from "vant";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data () {
    return {
      order: {},
      status: {
        1: "未派单",
        2: "已派单",
        3: "已完成",
        4: "取消预约",
        5: "已退款",
      },
    };
  },
  computed: {},
  watch: {},
  mounted () {
    this.orderserviceinfo();
  },
  methods: {
    formatCreateTime (val) {
      return this.$moment(val).calendar(null, {
        sameDay: "MM月DD日 [今天] HH:mm:ss",
        nextDay: "MM月DD日 [明天] HH:mm:ss",
        nextWeek: "dddd",
        lastDay: "MM月DD日 [昨天] HH:mm:ss",
        lastWeek: "MM月DD日 [上个] HH:mm:ss",
        sameElse: 'MM月DD日  HH:mm:ss'
      });
    },
    //获取细节
    orderserviceinfo () {
      this.$axios
        .get(this.$api.orderserviceinfo, {
          params: {
            send_id: this.$route.query.send_id,
          },
        })
        .then((res) => {
          this.order = res.data.data[0];
        });
    },
    //转化时间戳
    getTime (time) {
      var now = new Date(parseInt(time)),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return (
        y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d)
      );
    },
    //获取详细时间
    gettimeDetail (time) {
      var date = new Date(parseInt(time));
      let Y = date.getFullYear();
      let M = date.getMonth() + 1;
      let D = date.getDate();
      let h =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes()
          : date.getMinutes();
      let s =
        date.getSeconds() < 10
          ? "0" + date.getSeconds()
          : date.getSeconds();
      return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
    },
    complete () {
      Dialog.confirm({
        title: "提示",
        message: "确定完成此订单吗？",
      })
        .then(() => {
          this.$axios
            .post(this.$api.complete, {
              send_id: this.order.send_id,
            })
            .then((res) => {
              this.loading = false;

              if (res.data.code == 1) {
                Toast.success(res.data.msg);
                this.$router.go(-1);
              } else {
                Toast.fail(res.data.msg);
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    //取消订单
    usercancel () {
      Dialog.confirm({
        title: "提示",
        message: "确定取消此订单吗？",
      })
        .then(() => {
          this.$axios
            .post(this.$api.usercancel, {
              order_id: this.order.order_id,
            })
            .then((res) => {
              this.loading = false;

              if (res.data.code == 1) {
                Toast.success(res.data.msg);
                this.$router.go(-1);
              } else {
                Toast.fail(res.data.msg);
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    cancelCollect () {
      //如果没有code 去获取code

      this.$axios
        .post(this.$api.serviceafter, {
          send_id: this.$route.query.send_id,
        })
        .then((res) => {

          if (res.data.code != 1) {
            Toast.success(res.data.msg);
          } else {
            Toast.fail(res.data.msg);
          }
        });
    },
    cancal () {
      // this.result.push(item.product_id)

      Dialog.confirm({
        confirmButtonColor: "#ff7733",
        cancelButtonColor: "rgba(32,35,39,0.5)",
        message: "确认取消预订吗？",
      })
        .then(() => {
          this.cancelCollect();
        })
        .catch(() => {
          // on cancel
          this.result = [];
        });
    },
  },
};
</script>
<style lang='less' scoped>
.bubox {
  position: fixed;
  bottom: 0;
  background: #fff;
  padding: 12px 16px;
  width: calc(100% - 32px);
  display: flex;
  justify-content: flex-end;
  button {
    width: 90px;
    height: 32px;
    color: #ff7733;
    border: 1px solid #ff7733;
    flex-wrap: nowrap;
    margin-left: 20px;
  }
}
.groupMealDetail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  margin-top: 21px;
  display: flex;
  font-size: 14px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #ef402b;

  .status {
    margin-left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #f33224;
    line-height: 22px;
  }
  .failStatus {
    margin-left: 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    color: rgba(32, 35, 39, 0.7);
  }
}
.Box {
  width: 343px;

  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  border: 1px solid #f2f2f2;
  padding: 16px;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 14px;
  /deep/ .van-image {
    width: 100px;
    height: 80px;
  }
  .Box_top {
    display: flex;
    .right {
      flex: 1;
      margin-left: 12px;
      .top {
        display: flex;
        justify-content: space-between;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        .name {
          font-size: 16px;

          font-weight: bold;
          color: #06021a;
        }
        .status {
          font-size: 14px;

          color: #ff7733;
        }
        .failStatus {
          font-size: 14px;
          color: rgba(32, 35, 39, 0.7);
        }
      }
      .centerBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        .center {
          font-size: 14px;

          color: #303030;
        }
      }
    }
    .price {
      margin-top: 6px;
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #06021a;
    }
  }
  .Box_bottom {
    margin-top: 6px;
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ff7733;
  }
}

.orderBox {
  margin-top: 12px;
  width: 343px;

  box-sizing: border-box;
  padding: 16px;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  border: 1px solid #f2f2f2;
  display: flex;
  flex-direction: column;

  justify-content: space-between;
  div {
    display: flex;

    justify-content: space-between;
    margin-top: 12px;
    span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #303030;
    }
  }
  h3 {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #909090;
    margin: 0;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 12px;
  }
}
.btnList {
  width: 343px;
  display: flex;
  justify-content: space-between;
  margin-top: 66px;
  margin-bottom: 42px;
  button {
    width: 162px;
    height: 44px;
  }
  .cancel {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(6, 2, 26, 0.6);
    color: rgba(6, 2, 26, 0.6);
  }
  .confirm {
    background: #b60102;
    border: 1px solid #b60102;
  }
}
.evaluate {
  margin-top: 66px;

  width: 343px;
  height: 44px;
}
.icon {
  width: 22px;
  height: 22px;
}
</style>